<template>
  <a-card>
    <a-row>
      <a-col align="left">
        <a-button type="primary" @click="addModal" style="margin-bottom: 10px">
          <a-icon type="plus" />
          添加成套件信息
        </a-button>
      </a-col>

      <!-- 添加收发类别彈窗开始 -->
      <a-modal
        ref="collectionForm"
        :visible="addVisible"
        width="60%"
        title="添加成套件信息"
        okText="提交"
        @cancel="addCancel"
        @ok="addOk"
      >
        <a-form-model ref="" :rules="rules" :model="addForm" v-bind="layout">
          <a-row>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="成套件编码">
                <a-input disabled v-model="addForm.inventoryNo"></a-input>
                <!-- <a-select
                  v-model="addForm.inventoryNo"
                  @change="inventoryNameChange"
                  @search="handleSearch"
                  showSearch
                >
                  <a-select-option
                    v-for="val in inventoryList"
                    :key="val.id"
                    :value="
                      val.inventoryNo +
                      '|' +
                      val.inventoryName +
                      '|' +
                      val.inventoryId
                    "
                    >{{ val.inventoryNo }}
                    {{ val.inventoryName }}
                  </a-select-option>
                </a-select> -->
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="成套件名称">
                <!-- <a-input disabled v-model="addForm.inventoryName"></a-input> -->
                <a-select
                  v-model="addForm.inventoryName"
                  @change="inventoryNameChange"
                  @search="handleSearch"
                  showSearch
                >
                  <a-select-option
                    v-for="val in inventoryList"
                    :key="val.id"
                    :value="
                      val.inventoryNo +
                      '|' +
                      val.inventoryName +
                      '|' +
                      val.inventoryId
                    "
                    >{{ val.inventoryNo }}
                    {{ val.inventoryName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="成套件单位">
                <a-input disabled v-model="addForm.unit"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="配件编码">
                <a-input
                  disabled
                  v-model="addForm.partsInventoryNo"
                ></a-input>
                <!-- <a-select
                  v-model="addForm.partsInventoryNo"
                  @change="partsInventoryChange"
                  @search="handleSearch"
                  showSearch
                >
                  <a-select-option
                    v-for="val in inventoryList"
                    :key="val.id"
                    :value="
                      val.inventoryNo +
                      '|' +
                      val.inventoryName +
                      '|' +
                      val.inventoryId
                    "
                    >{{ val.inventoryNo }}
                    {{ val.inventoryName }}
                  </a-select-option>
                </a-select> -->
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="配件名称">
                <!-- <a-input
                  disabled
                  v-model="addForm.partsInventoryName"
                ></a-input> -->
                  <a-select
                  v-model="addForm.partsInventoryName"
                  @change="partsInventoryChange"
                  @search="handleSearch"
                  showSearch
                >
                  <a-select-option
                    v-for="val in inventoryList"
                    :key="val.id"
                    :value="
                      val.inventoryNo +
                      '|' +
                      val.inventoryName +
                      '|' +
                      val.inventoryId
                    "
                    >{{ val.inventoryNo }}
                    {{ val.inventoryName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="配件单位">
                <a-input disabled v-model="addForm.partsUnit"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="损耗率">
                <a-input v-model="addForm.lossRate" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="加工单价">
                <a-input v-model="addForm.processingUnitPrice" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" md="8" :sm="24">
              <a-form-model-item label="比例">
                <a-input v-model="addForm.ratio" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <!-- 新增收发类别结束 -->
    </a-row>

    <!-- 表格 -->

    <a-table
      bordered
      :data-source="dataSource"
      :columns="columns"
      :row-selection="rowSelection"
    >
      <template slot="序号" slot-scope="text, record">
        <editable-cell
          :text="text"
          @change="onCellChange(record.key, 'num', $event)"
        />
      </template>
      <template slot="caozuo" slot-scope="text, record">
        <!-- 修改按钮与修改页面 -->
        <span slot="action">
          <a type="primary" @click="showModal1(record)"> 修改 </a>&nbsp;
        </span>
        <!-- 删除提示 -->
        <a-popconfirm
          v-if="dataSource.length"
          title="确定删除吗?"
          @confirm="() => onDelete(record.id)"
        >
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <!-- 修改弹窗开始 -->
    <a-modal
      title="修改成套件信息"
      :visible="visible1"
      width="60%"
      :labelCol="{ span: 8 }"
      :WapperCol="{ span: 5 }"
      @ok="handleOk1"
      @cancel="handleCancel1"
      cancelText="取消"
      okText="保存"
    >
      <a-form-model ref="" :rules="rules" :model="updateForm" v-bind="layout">
        <a-row>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item
              ref="inventoryNo"
              label="成套件编码"
              prop="inventoryNo"
            >
              <a-input v-model="updateForm.inventoryNo" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item
              ref="inventoryName"
              label="成套件名称"
              prop="inventoryName"
            >
              <a-input v-model="updateForm.inventoryName" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item ref="unit" label="成套件单位" prop="unit">
              <a-input v-model="updateForm.unit" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item
              ref="partsInventoryNo"
              label="配件编码"
              prop="partsInventoryNo"
            >
              <a-input v-model="updateForm.partsInventoryNo" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item
              ref="partsInventoryName"
              label="配件名称"
              prop="partsInventoryName"
            >
              <a-input v-model="updateForm.partsInventoryName" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item
              ref="partsUnit"
              label="配件单位"
              prop="partsUnit"
            >
              <a-input v-model="updateForm.partsUnit" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item ref="lossRate" label="损耗率" prop="lossRate">
              <a-input placeholder="" v-model="updateForm.lossRate" />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item
              ref="processingUnitPrice"
              label="加工单价"
              prop="processingUnitPrice"
            >
              <a-input
                placeholder=""
                v-model="updateForm.processingUnitPrice"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item ref="ratio" label="比例" prop="ratio">
              <a-input placeholder="" v-model="updateForm.ratio" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <!-- 修改弹窗结束 -->
  </a-card>
</template>

<script>
/* import FileSaver from "file-saver";
import XLSX from "xlsx"; */
import { ChengTaoJianHttp } from "../../services/modules/JiChuXinXiGuanLi/ChengTaoJianGuanLi";
const $http = new ChengTaoJianHttp();
import { CommonAjax } from "@/services/modules/common";
import { id } from "date-fns/locale";
const comHttp = new CommonAjax(); // 公用接口
/* import { ZiDianBiaoHttp } from "../../services/modules/ZiDianBiao";
const $ZDB = new ZiDianBiaoHttp();  */

const columns = [
  {
    title: "序号",
    dataIndex: "num",
    width: "8%",
    align: "center",
    scopedSlots: { customRender: "num" },
  },
  {
    title: "成套件编码",
    key: "inventoryNo",
    width: "",
    dataIndex: "inventoryNo",
    align: "center",
  },
  {
    title: "成套件名称",
    key: "inventoryName",
    width: "",
    dataIndex: "inventoryName",
    align: "center",
  },
  {
    title: "成套件单位",
    key: "unit",
    width: "",
    dataIndex: "unit",
    align: "center",
  },
  {
    title: "配件编码",
    key: "partsInventoryNo",
    width: "",
    dataIndex: "partsInventoryNo",
    align: "center",
  },
  {
    title: "配件名称",
    key: "partsInventoryName",
    width: "",
    dataIndex: "partsInventoryName",
    align: "center",
  },
  {
    title: "配件单位",
    key: "partsUnit",
    width: "",
    dataIndex: "partsUnit",
    align: "center",
  },
  {
    title: "损耗率",
    key: "lossRate",
    width: "",
    dataIndex: "lossRate",
    align: "center",
  },
  {
    title: "加工单价",
    key: "processingUnitPrice",
    width: "",
    dataIndex: "processingUnitPrice",
    align: "center",
  },
  {
    title: "比例",
    key: "ratio",
    width: "",
    dataIndex: "ratio",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "caozuo",
    width: "",
    scopedSlots: { customRender: "caozuo" },
    align: "center",
  },
];
const dataSource = [];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
  data() {
    return {
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },
      //===============分页========================
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      inventoryList: [], //存货编码、名称、规格型号、单位
      //新增弹窗
      addVisible: false,
      addForm: {
        inventoryNo: "", //成套件编码
        inventoryName: "", //成套件名称
        unit: "", //成套件单位
        partsInventoryNo: "", //配件编码
        partsInventoryName: "", //配件名称
        partsUnit: "", //配件单位
        lossRate: "", //损耗率
        processingUnitPrice: "", //加工单价
        ratio: "", //比例
      },

      visible1: false, //修改弹窗
      updateForm: {
        inventoryNo: "", //成套件编码
        inventoryName: "", //成套件名称
        unit: "", //成套件单位
        partsInventoryNo: "", //配件编码
        partsInventoryName: "", //配件名称
        partsUnit: "", //配件单位
        lossRate: "", //损耗率
        processingUnitPrice: "", //加工单价
        ratio:"",//比例
      },

      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
      },

      // 表格数据

      count: 2,
      // --- 表格渲染数据 ---
      dataSource,
      dataSourceCache: [], // 表格渲染数据缓存
      columns, //表格
      rowSelection, //按行勾选
      // 新增验证规则
      rules: {
        //验证规则
        penghao: [
          { required: true, message: "棚号为必填项!", trigger: "blur" },
        ],
        pengleixing: [
          { required: true, message: "棚类型为必填项！", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.GetPackageList(); //获取成套件列表
    // this.getInventoryInformationByStorageId(); //存货信息档案-返回存货编码、名称、规格型号、单位
  },

  methods: {
     handleSearch(value) {
      this.inventoryList = [];
      console.log("value", value);
      let query = "?name=" + value;
      console.log("query", query);
      if (value == "" || value == null) {
        this.inventoryList = [];
      } else {
        comHttp.getSearchInventoryInformationFile(query).then((res) => {
          console.log("结果为", res);
          // this.goodsList = res.result;
          for (let i = 0; i < res.result.length; i++) {
            if (
              res.result[i].specificationsModel == "null" ||
              res.result[i].specificationsModel == null
            ) 
            if (res.result[i].unit == "null" || res.result[i].unit == null) {
              res.result[i].unit = "";
            }
            let data = {
              inventoryId: res.result[i].pkInvbasdoc, // 存货 id
              inventoryNo: res.result[i].invcode, //存货编码
              inventoryName: res.result[i].invname, //存货名称
              // specificationsModel: res.result[i].specificationsModel, //规格型号
              unit: res.result[i].measname, //单位
            };
            this.inventoryList.push(data);
          }
        });
      }
    },
    GetPackageList() {
      //获取成套件列表
      let dd = this.queryParam.page; //分页
      this.dataSource = [];
      let _data = [];
      $http.GetPackageList("?pageNo=" + dd).then((res) => {
        const pagination = { ...this.pagination }; //分页
        this.data = res.result.records;
        pagination.total = res.result.total; //分页
        pagination.pageSize = res.result.size; //分页
        this.pagination = pagination; //分页
        for (let i = 0; i < res.result.records.length; i++) {
          let data = {
            id: res.result.records[i].id,
            num: (res.result.current - 1) * 10 + i + 1, //序号
            inventoryNo: res.result.records[i].inventoryNo, //成套件编码
            inventoryName: res.result.records[i].packageInventoryInformationId_dictText, //成套件名称
            unit: res.result.records[i].partsUnit, //成套件单位
            partsInventoryNo: res.result.records[i].partsInventoryNo, //配件编码
            partsInventoryName: res.result.records[i].partsInventoryInformationId_dictText, //配件名称
            partsUnit: res.result.records[i].unit, //配件单位
            lossRate: res.result.records[i].lossRate, //损耗率
            processingUnitPrice: res.result.records[i].processingUnitPrice, //加工单价
            ratio: res.result.records[i].ratio, //比例
          };
          _data.push(data);
        }
        this.dataSource = _data;
        this.dataSourceCache = _data;
        console.log(this.dataSource, "dataSource");
      });
    },
    getInventoryInformationByStorageId(id) {
      //获取存货列表
      comHttp.getInventoryInformationByStorageId("?id=" + id).then((res) => {
        console.log("获取存货编码、名称、规格、单位", res);
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            inventoryId: res.result[i].id, // 存货 id
            inventoryName: res.result[i].inventoryName,
            inventoryNo: res.result[i].inventoryNo,
            // specificationsModel: res.result[i].specificationsModel,
            unit: res.result[i].unit,
          };
          this.inventoryList.push(data);
        }
        console.log("返回存货编码、存货名称", this.inventoryList);
      });
    },
    // ==============分页======================
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      this.GetPackageList();
    },
    //添加成套件编码触发事件

    inventoryNameChange(value, option) {
      let addForm = this.addForm;
      addForm.id = option.key;

      // console.log(value , option);
      const newValue = value.split("|");
      console.log("新增选择了成套件编码", newValue);
      addForm.inventoryNo = newValue[0];
      addForm.packageInventoryInformationId = newValue[2];
      const inventoryList = this.inventoryList;
      let arr = inventoryList.filter(
        (item) => item.inventoryNo === addForm.inventoryNo
      );
      console.log(arr);
      addForm.inventoryName = arr[0].inventoryName;
      addForm.unit = arr[0].unit;
      this.addForm = addForm;
      console.log(addForm);
    },
    //配件编码触发事件
    partsInventoryChange(value, option) {
      let addForm = this.addForm;
      addForm.id = option.key;
      // console.log(value , option);
      const newValue = value.split("|");
      console.log("新增选择了配件编码", newValue);
      addForm.partsInventoryNo = newValue[0];
      addForm.partsInventoryInformationId = newValue[2];
      const inventoryList = this.inventoryList;
      let arr = inventoryList.filter(
        (item) => item.inventoryNo === addForm.partsInventoryNo
      );
      console.log(arr);
      addForm.partsInventoryName = arr[0].inventoryName;

      addForm.partsUnit = arr[0].unit;
      this.addForm = addForm;
    },

    handleCancel1() {
      // 修改弹窗取消
      this.visible1 = false;
    },

    handleOk1() {
      //修改弹窗ok
      this.visible1 = false;
      const data = {
        id: this.updateForm.id,
        lossRate: Number(this.updateForm.lossRate), //损耗率
        processingUnitPrice: Number(this.updateForm.processingUnitPrice), //加工单价
        ratio: Number(this.updateForm.ratio), //比例
        /*  inventoryNo: this.updateForm.inventoryNo,
        inventoryName: this.updateForm.inventoryName,
        unit: this.updateForm.unit,
        partsInventoryNo: this.updateForm.partsInventoryNo,
        partsInventoryName: this.updateForm.partsInventoryName,
        partsUnit: this.updateForm.partsUnit,
        lossRate: this.updateForm.lossRate,
        processingUnitPrice: this.updateForm.processingUnitPrice , */
      };
      console.log("data::::::::::", data);
      $http.updatePackageInfo(data).then((res) => {
        console.log("我进来了");
        if (res.success) {
          this.$message.success("保存成功！");
          this.GetPackageList();
          this.visible1 = false;
          console.log(res);
        } else {
          this.$message.success("保存失败！");
        }
      });
    },
    showModal1(record) {
      //修改按钮
      this.visible1 = !this.visible1;
      console.log(record);
      id;
      this.updateForm.id = record.id; //成套件编码
      this.updateForm.inventoryNo = record.inventoryNo; //成套件编码
      this.updateForm.inventoryName = record.inventoryName; //成套件名称
      this.updateForm.unit = record.unit; //成套件单位
      this.updateForm.partsInventoryNo = record.partsInventoryNo; //配件编码
      this.updateForm.partsInventoryName = record.partsInventoryName; //配件名称
      this.updateForm.partsUnit = record.partsUnit; //配件单位
      this.updateForm.lossRate = record.lossRate; //损耗率
      this.updateForm.processingUnitPrice = record.processingUnitPrice; //加工单价
      this.updateForm.ratio = record.ratio; //比例
    },

    /*  onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find((item) => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    }, */
    onDelete(_id) {
      console.log("删除这一条", _id);
      const deletePath = `?id=${_id}`;
      $http
        .deletePackageInfo(deletePath)
        .then((res) => {
          if (res && res.code === 200) {
            this.$message.success("删除成功");
            this.GetPackageList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .then(() => {
          this.data = [];
        });
    },
    //新增弹窗
    addModal() {
      this.addVisible = true;
    },
    addCancel() {
      //新增弹窗
      this.addVisible = !this.addVisible;
      this.addForm = {
        //清空表单
        inventoryNo: "", //成套件编码
        inventoryName: "", //成套件名称
        unit: "", //成套件单位
        partsInventoryNo: "", //配件编码
        partsInventoryName: "", //配件名称
        partsUnit: "", //配件单位
        lossRate: "", //损耗率
        processingUnitPrice: "", //加工单价
        rati: "", //比例
      };
    },
    addOk() {
      //新增弹窗的提交
      console.log();
      this.addVisible = false;
      const data = {
        lossRate: Number(this.addForm.lossRate), //损耗率
        processingUnitPrice: Number(this.addForm.processingUnitPrice), //加工单价
        ratio: Number(this.addForm.ratio), //比例
        packageInventoryInformationId: 
          this.addForm.packageInventoryInformationId
        ,
        partsInventoryInformationId: 
          this.addForm.partsInventoryInformationId
        ,
      };
      console.log("新增数据：：：：", data);

      $http.addPackageInfo(data).then((res) => {
        console.log("我要新增");
        if (res.success) {
          this.$message.success("保存成功！");
          this.addVisible = false; //关闭弹窗
          this.addForm = {
            //清空表单
            inventoryNo: "", //成套件编码
            inventoryName: "", //成套件名称
            unit: "", //成套件单位
            partsInventoryNo: "", //配件编码
            partsInventoryName: "", //配件名称
            partsUnit: "", //配件单位
            lossRate: "", //损耗率
            processingUnitPrice: "", //加工单价
            ratio: "", //比例
          };
          console.log(res);
          this.GetPackageList();
        } else {
          this.$message.success("保存失败！");
        }
      });
    },
  },
};
</script>
